<template>
	<view class="container">
		<view class="home-tabs">
			<view class="tabs">
				<view :class="index===activeIndex ?'item on' :'item'" 
                v-for="(item, index) in tabs" :key="index" 
                @click="changeTabs(index)">{{item}}</view>
			</view>
            <image class="icon-search" src="@/static/icon-search.png"></image>
		</view>
        <view class="home-cont" v-if="tabContents[activeIndex]">
        	<view class="cont-item" v-for="(item, index) in tabContents[activeIndex].list" :key="index">
                <view class="user-box">
                    <image class="userPic" :src="item.user.picUrl"></image>
                    <text class="name">{{item.user.name}}</text>
                </view>
                <view class="textarea">{{item.content}}</view>
                <view class="icon-box">
                    <image src="@/static/icon-share.png"></image>
                    <image src="@/static/icon-comment.png"></image>
                    <image src="@/static/icon-giveThumbsUp.png"></image>
                    <image src="@/static/icon-collect.png"></image>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:['关注','广场'],
                activeIndex: 0,
                tabContents: [
                    {
                        list:[
                            {
                                user:{
                                    picUrl:'/static/userPic.png',
                                    name:'张飞'
                                },
                                content:'帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖'
                            },
                            {
                                user:{
                                    picUrl:'/static/userPic.png',
                                    name:'张飞'
                                },
                                content:'帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖'
                            },
                            {
                                user:{
                                    picUrl:'/static/userPic.png',
                                    name:'张飞'
                                },
                                content:'帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖'
                            }
                        ]
                    },
                    {
                        list:[
                            {
                                user:{
                                    picUrl:'/static/userPic.png',
                                    name:'刘备'
                                },
                                content:'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
                            }
                        ]
                    }
                ],
                
			}
		},
		onLoad() {

		},
		methods: {
            changeTabs(index){
               this.activeIndex = index;
			},
		}
	}
</script>

<style lang="scss">
    page{
        background: #d6e8dc;
    }
    .home-tabs{
        position: relative;
        border-bottom: 3rpx solid #cfcfcf;
        padding-bottom: 20rpx;
        .icon-search{
            width: 56rpx;
            height: 56rpx;
            position: absolute;
            top: 32rpx;
            right: 63rpx;
        }
        .tabs{
            display: flex;
            align-items: center;
            justify-content: center;
            .item{
                color: #000000;
                font-size: 32rpx;
                margin: 0 64rpx;
                text-shadow:  0 0 15rpx #FFFFFF;
                position: relative;
                padding: 32rpx 0 22rpx;
                &:after{
                    content: "";
                    display: none;
                    width: 90rpx;
                    height: 8rpx;
                    background: #1b4439;
                    position: absolute;
                    left: 50%;
                    margin-left: -45rpx;
                    bottom: 0;
                }
            }
            .on{
                font-size: 36rpx;
                padding: 22rpx 0;
                &:after{
                    display: block;
                }
            }
        }
    }
    .home-cont{
        padding: 5rpx 18rpx 40rpx;
        .cont-item{
            background: #FFFFFF;
            border: 4rpx solid #cfcfcf;
            padding: 0 26rpx;
            box-sizing: border-box;
            margin-top: 17rpx;
            .user-box{
                display: flex;
                align-items: center;
                margin: 14rpx 0 18rpx;
                .userPic{
                    width: 109rpx;
                    height: 109rpx;
                    border-radius: 50%;
                }
                .name{
                    color: #000000;
                    font-size: 38rpx;
                    margin-left: 20rpx;
                }
            }
            .textarea{
                background: #FFFFFF;
                border: 4rpx solid #cfcfcf;
                padding: 24rpx 39rpx;
                box-sizing: border-box;
                color: #000000;
                font-size: 30rpx;
                line-height: 1.5;
                outline: none;
                width: 100%;
                height: 212rpx;
            }
            .icon-box{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 45rpx 40rpx 43rpx;
                image{
                    width: 48rpx;
                    height: 48rpx;
                }
            }
        }
    }
</style>
